<template>
  <div>
    <a-modal title="修改密码" :visible="visible" @ok="handleSubmit" @cancel="handleCancel">
      <section>
        <a-form :form="form" class="pass-form">
          <a-form-item label="旧密码" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'originPass',
                {
                  rules: [
                    { validator: validPasswd },
                    { required: true, message: '不能为空!' }
                  ]
                }
              ]"
              type="password"
              placeholder="请输入旧密码"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="新密码" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'newPass',
                {
                  rules: [
                    { required: true, message: '不能为空!' },
                    { validator: validPasswd }
                  ]
                }
              ]"
              type="password"
              placeholder="请输入新密码"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="确认密码" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'repeatPass',
                {
                  rules: [
                    { required: true, message: '不能为空!' },
                    { validator: validPasswd }
                  ]
                }
              ]"
              type="password"
              placeholder="请输入新密码"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
        </a-form>
      </section>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { user_passwd } from "@/api/user";
import { RouterPath } from "@/utils/VEnum";
import formItemLayout from "@/common/FormItemLayout";
import { validPasswd } from "@/common/validate";

@Component({ name: "Passwd" })
export default class Passwd extends Vue {
  private visible: boolean = false;
  private form: any = {};
  private validPasswd: any = validPasswd;

  @Getter("user")
  private user: any;

  @Action("logout")
  private logout: any;

  private formItemLayout: any = formItemLayout;

  redirect() {
    const that = this;
    this.$confirm({
      title: "密码修改成功",
      content: "将要为您跳转到登录界面",
      icon: "smile",
      keyboard: false,
      maskClosable: false,
      onCancel() {
        that.logout();
        window.location.href = RouterPath.HOME;
      },
      onOk() {
        that.logout();
        window.location.href = RouterPath.HOME;
      }
    });
  }

  showModal() {
    this.form = this.$form.createForm(this);
    this.visible = true;
  }

  handleSubmit() {
    this.form.validateFields((err: any, values: any) => {
      if (!err) {
        const { newPass, repeatPass } = values;
        if (newPass !== repeatPass) {
          this.$message.error("新密码输入不一致");
          return null;
        }
        this.submit(values);
      }
    });
  }

  async submit(values: any) {
    const { account } = this.user;
    try {
      await user_passwd({ account, ...values });
      this.handleCancel();
      this.redirect();
    } catch (error) {
      return null;
    }
  }

  handleCancel(e?: any) {
    this.visible = false;
  }
}
</script>
